<template>
  <a-modal
      title="上传证书"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      @ok="handleOk"
  >
    <a-upload-dragger
        name="file"
        v-model:fileList="fileList"
        :multiple="true"
        :customRequest="customRequest"
        @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined />
      </p>
      <p class="ant-upload-text">
        单击或拖动文件到此区域上载
      </p>
      <p class="ant-upload-hint">
        支持单个或批量上传。
      </p>
    </a-upload-dragger>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal, Upload, message} from 'ant-design-vue'
import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'
import {fileUpload} from "@/api/strategy/file"

export default defineComponent({
  name: "policy-add",
  components: { [Modal.name]: Modal,[Upload.Dragger.name]: Upload.Dragger, DynamicForm},
  props: {
    remove: { // 移除模态框
      type: Function
    },
    type: {
      type: [String, Number]
    },
    callback: {
      type: Function
    }
  },
  setup(props) {

    const state = reactive({
      visible: true,
      fileList: [],
      confirmLoading: false,
    })

    const customRequest = (file)=>{
      console.log(file.file)
      fileUpload(file.file).then((res)=>{
        if(0>res.Code){
          file.onError(res.message, file.file)
        }else{
          file.onSuccess(res, file.file)
        }
      })
    }

    const handleChange = (info) => {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功.`)
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败.${info.file.response}.`)
      }
    }

    const handleOk = () => {
      props.callback && props.callback()
      state.visible = false
    }

    return {
      ...toRefs(state),
      customRequest,
      handleOk,
      handleChange,
    }
  }
})
</script>

<style scoped>
</style>
